<template>
    <div class="wrapper">
        <v-head :LoginStatus="login_status"></v-head>
        <!-- <v-sidebar></v-sidebar> -->
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <div class="content" >
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
                <el-backtop target=".content"></el-backtop>
            </div>
        </div>

        
        <div style="display: none;" >
            <audio controls ref="click_one"><source :src="music_sound.click_one" /></audio>
            <audio controls ref="click_two"><source :src="music_sound.click_two" /></audio>
            <audio controls ref="open"><source :src="music_sound.open" /></audio>
            <audio controls ref="close"><source :src="music_sound.close" /></audio>
            <!-- 大笑 -->
            <audio controls ref="laugh"><source :src="music_sound.laugh" /></audio>
            <!-- 你们就是磨砺过的锋刃吗 -->
            <audio controls ref="sword"><source :src="music_sound.sword" /></audio>
            <!-- 全都烧起来吧 -->
            <audio controls ref="combustion"><source :src="music_sound.combustion" /></audio>
            <!-- 在火焰中迎接暴龙王吧 -->
            <audio controls ref="king"><source :src="music_sound.king" /></audio>
        </div>
        
        <footer class="footer-div" > 京ICP备2021000441号-6 </footer>
    </div>
</template>

<script>
import vHead from '@/components/common/Header.vue';
export default {
    name: 'home',
    data() {
        return {
            tagsList: [],
            collapse: false,

            login_status: this.$store.state.users_status,
            
            music_sound: {
                click_one: require("@/assets/music/sound/huadong.ogg"),
                click_two: require("@/assets/music/sound/xuanzhong.ogg"),
                focus_one: require("@/assets/music/sound/huadong.ogg"),
                open: require("@/assets/music/sound/open.ogg"),
                close: require("@/assets/music/sound/close.ogg"),

                laugh: require("@/assets/music/sound/bakal_spake/laugh.ogg"),
                sword: require("@/assets/music/sound/bakal_spake/sword.ogg"),
                combustion: require("@/assets/music/sound/bakal_spake/combustion.ogg"),
                king: require("@/assets/music/sound/bakal_spake/king.ogg"),
            },
        };
    },
    methods: {
        playSound(keyword) {
            if (!this.$refs[keyword]) {
                return false;
            } else {
                this.$refs[keyword].currentTime = 0;
                this.$refs[keyword].play();
            }
        },
    },
    components: { vHead },
};
</script>

<style scoped>
.footer-div{
    text-align: center;
    min-height: 20px;
    width: 300px;
    background-color: black;
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: aliceblue;
}
</style>

